<template>
	<view class="contanier">
		<view class="up-card-box" v-for="(item,index) in GreenLand">
			
			<view class="line-1">
				<u-input border="bottom" placeholder="公园名称"  class="u-input" input-align="center" v-model="item.name">
				</u-input>
			</view><view class="title">
				<my-swiper v-show="item.basePhoto.length>0" :list="item.basePhoto" @OK="e=>delPhoto(index,e)"></my-swiper>
				<button v-text="'上传图片'" class="up-btn" @click="upImage(index)"></button>
			</view>
			<view class="line-1">
				<u-input border="type" clearable class="u-input" @click="show = true"
				v-model="item.date " disabled>
					<template slot="prefix" @click="show = true">
						日期:
					</template>
				</u-input>
				<u-input border="bottom" clearable class="u-input" v-model="item.interNum">
					<template slot="prefix">
						网格编号:
					</template>
				</u-input>
			</view>
			<u-datetime-picker :show="show" mode="date" @confirm="(data)=>showDate(data,index)"
				:closeOnClickOverlay="true" @close="show=false" @cancel="show=false">
			</u-datetime-picker>
			<view class="line-1">
					<u-input border="bottom" clearable class="u-input" disabled  @click="toObserve(index)" >
						<template slot="prefix">
							<text @click="toObserve(index)">绿地网格监测信息</text>
						</template>
					</u-input>
					<u-input border="bottom" clearable class="u-input" disabled  @click="toManager(index)">
						<template slot="prefix">
							<text @click="toManager(index)">管理指标数据</text>
						</template>
					</u-input>
				
			</view>
			<button v-text="'上传'" class="up-btn" @click="upInsert(index)"></button>
			<button v-text="'删除'" class="del" @click="del(index)"></button>
		</view>
		
		<button v-text="'新增'" class="add-btn" @click="add()"></button>
	</view>

</template>

<script>
	import {
		chooseImage,
		previewImage
	} from "@/common/utils/chooseImage.js" //上传图片以及后续读取封装
	import umodal from "@/components/modal/umodal.vue"
	import unLogin from "@/components/unLogin.vue"
	import { pathToBase64, base64ToPath } from '@/node_modules/image-tools/index.js'
	
	const timeFormat = uni.$u.timeFormat
	export default {
		data() {
			return {
				GreenLand:[{upPhoto:false,upbase64:[],basePhoto: [],greenLandPhotos:[]}],
 				show:false,
				user:[],
				isUser:false,
				phoneNum:2
			}
		},
		components:{umodal,unLogin},
		onLoad() {
			
		},
		onShow() {
			this.showDate(Number(new Date()),0)
			if(this.$storage.get("user") != []){
				this.user= JSON.parse( this.$storage.get("user"))
				//这个判断当前页面是否登录，暂时未使用。2022/11/24
				this.isUser=true
			}
		
		},
		onLoad(options) {
		},
		methods: {
			delPhoto(index,Pindex) {
				// console.log(index,Pindex);
				this.GreenLand[index].basePhoto.splice(Pindex, 1)
				this.GreenLand[index].upbase64.splice(Pindex, 1)
				if (this.GreenLand[index].basePhoto.length >= 2) {
					this.phoneNum--;
					
				}
			},
			upImage(index) {
				if (this.GreenLand[index].basePhoto.length >= 2) {
					this.phoneNum++;
					
				}
				chooseImage().then(response => {
					pathToBase64(response.tempFilePaths[0])
					  .then(base64 => {
							this.GreenLand[index].upPhoto = true
							this.GreenLand[index].basePhoto.push(base64)
							this.GreenLand[index].upbase64.push(base64.slice(23,-1))
					  })
					  .catch(error => {
					    // console.error(error)
					  })
				})
				
			},
			showDate(data,index,interNum) {
				this.GreenLand[index].date = timeFormat(data.value, 'yyyy-mm-dd')
				if(interNum){
					this.GreenLand[index].interNum=timeFormat(data.value, "yyyymmdd")+interNum
				}else{
					this.GreenLand[index].interNum=timeFormat(data.value, "yyyymmdd")
					this.getInterNum(index)
				}
				this.show = false
			},
			//页面新增的编号排列：已解决
			//异步如何更新至列表：已解决 this.$forceUpdate()
			getInterNum(index){
				this.$http.httpGet("green/getInterNum/"+timeFormat(new Date,"yyyy-mm-dd"),"").then(res=>{
					if(res.data.status==200){
						this.GreenLand[index].interNum += res.data.data
						this.$forceUpdate()
					}else{
						this.GreenLand[index].interNum += "01"
					}
					// console.log(res)
				})
			},
			toObserve(index){
				if(!this.GreenLand[index].name){
					this.$utils.errorMsg("请填写公园名称")
					return;
				}
				this.$utils.navigateTo("upInsect/observer",{'id':index})
			},
			toManager(index){
				if(!this.GreenLand[index].name){
					this.$utils.errorMsg("请填写公园名称")
					return;
				}
				this.$utils.navigateTo("upInsect/manager",{'id':index})
			},
			add(data){
				if(this.GreenLand.length>0){
					let interNum = this.GreenLand[this.GreenLand.length-1].interNum;
					interNum = Number(interNum.substring(8))+1
					if(interNum<10){
						interNum="0"+interNum;
					}
					this.GreenLand.push({upPhoto:false,upbase64:[],basePhoto: [],greenLandPhotos:[]})
					this.showDate(Number(new Date()),this.GreenLand.length-1,interNum)
				}else{
					this.GreenLand.push({upPhoto:false,upbase64:[],basePhoto: [],greenLandPhotos:[]})
					this.showDate(Number(new Date()),this.GreenLand.length-1)
				}
			},
			upInsert(index){
				if(!this.verify(this.GreenLand[index])){
					return;
				}
				//每次上传信息，在首页没有更新 2022-11-25
				//保存没有数据，图片没有产生关联，图片的Url地址没有去除Web地址 待修改2022/11/24
				this.upGreenLandImage(index).then(sucess=>{
					let data = this.GreenLand[index];
					setTimeout(()=>{
					data.greenLandPhotos.push({photoUrl:sucess})
					data.greenLandPhotos=JSON.parse(JSON.stringify(data.greenLandPhotos))
					this.user.green.push(data)
					// console.log(this.user)
					this.$http.httpPost('green/save',this.user).then(response=>{
						if(response.data.status==200){
							// 写入storage缓存
							this.$storage.setJson("user",this.user)
							console.log(this.user)
							//获取用户的绿地信息
							this.$http.httpPost('green/findAllByRole',response.data.data).then(sucess=>{
								// console.log("用户上传的绿地信息:",sucess)
								if(sucess.data.status==200){
									this.$storage.set("greenLandAll" ,sucess.data.data)
								}
							})
							// this.$utils.sucessMsg(response.data.data)
							//这里延时的目的是给提示框展示的时间
							// setTimeout(()=>{
							// 	this.$utils.reLaunch('../reLaunch/reLaunch?id=upInsect','')
							// },800)
							this.GreenLand.splice(index,1)
						}
					})
					},800)
				})
			},
			upGreenLandImage(greenIndex){
				return new Promise((resolve,rejcect)=>{
					let data = this.GreenLand[greenIndex];
					data.upbase64.forEach((base64,index)=>{
						this.$http.httpPost('photo/upGreenLandImage/'+data.interNum+index+'.jpg',base64).then(response=>{
						let url = response.data.data.slice(7)
						resolve(url)
						}).catch(error=>{
							rejcect()
						})
					})
				})
			},
			del(index){
				this.GreenLand.splice(index,1)
			},
			verify(data){
				if(!data.grid){
					this.$utils.errorMsg("请填写绿地网格监测信息！")
					return false;
				}else if(!data.manager){
					this.$utils.errorMsg("请填写绿地网格监测信息！")
					return false;
				}else{
					return true;
				}
			}
			
		}
	}
</script>

<style scoped lang="scss">
	@import "upInsect.scss";
	.del{
		color: #13c2c2;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;

	}
	.add-btn{
		color: #e8e8e8;
		width: 40%;
		background-color: #3c9a77;
		border-radius: 20rpx;
		margin-top: 2%;
	}
	.up-card-box{
		width: 90%;
		margin: 30rpx 2%;
		padding: 20rpx;
		background-color: #91CB74;
		border-radius: 20rpx;
	}
	.line-1{
		display: flex;
		flex-direction: row;
	}
	.u-input{
		margin:10rpx 0; 
		background-color: #fff;
		border-radius: 20rpx;
	}
	.line-1 .u-input:nth-child(2){
		margin-left: 10rpx;
		
	}.line-1 view:nth-child(2){
		margin-left: 10rpx;
		
	}
	
	.up-btn{
		color: #000000;
		width: 100%;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-top: 2%;
	}
	.del{
		color: #000000;
		width: 100%;
		background-color: #aa0000;
		border-radius: 20rpx;
		margin-top: 2%;
	}
</style>
